<template>
    <div>
        <h1 class="myh1">计数器</h1>
        <h2>{{count}}======{{doubleNum}}</h2>
        <button @click="inc(2)">同步+1</button>
        <button @click="incrementAsync(5)">异步+2</button>
    </div>
</template>

<script>
/* 
   辅助函数访问模块化的状态的方法的步骤
   1、从vuex包中导入createNamespacedHelpers的函数
   2、通过createNamespacedHelpers函数的调用来解构map系列的映射函数
   const {mapState}=createNamespacedHelpers('counter')
   3、在computed中通过mapState函数的调用映射出仓库中的state状态
   4、在methods中通过mapMutations或者mapActions函数的扩展映射出仓库中的mutaitons或者actions的方法
*/
import {createNamespacedHelpers} from 'vuex'
const {mapState,mapMutations,mapActions,mapGetters}=createNamespacedHelpers('counter')
export default {
    computed:{
        ...mapState({"count":"num"}),
        ...mapGetters(["doubleNum"])
    },
    methods:{
        ...mapMutations(["SET_NUM"]),
        ...mapActions(["incrementAsync"]),
        inc(arg){
            this.SET_NUM(arg)
        }
    }
}
</script>

<style>
    .myh1{
        font-family:'华文琥珀';
    }
</style>